<template>
  <el-table-column
    :type="type"
    :align="align"
    :header-align="headerAlign"
    :index="index"
    :label="label"
    :prop="prop"
    :width="width"
    :min-width="minWidth"
    :fixed="fixed"
    :show-overflow-tooltip="showOverflowTooltip"
    :selectable="selectable"
  >
  <!-- 自定义表头 -->
  <!-- <template #header>
    <slot></slot>
  </template> -->
  <!-- 自定义内容 -->
  <template #default="scope">
    <slot :row="scope.row"></slot>
  </template>
  </el-table-column>
</template>

<script setup lang="ts" name="vTableColumn">
import { defineProps } from 'vue'
const props = defineProps({
  /**
 * 列的类型，可取值：
 * 'selection'    - 显示多选框
 * 'index'        - 显示行索引
 */

  type: {
    type: String
  },
  // 对齐方式，可取值：left/center/right
  align: String,
  // 表头对齐方式，默认与align一致，可取值：left/center/right
  headerAlign: String,
  // type=index有用，自定义索引
  index: [String, Function],
  // 标题
  label: String,
  // 对应列内容的字段名
  prop: String,
  // 列宽
  width: String,
  // 列的最小宽度，会把剩余宽度按比例分配给设置了 min-width 的列
  minWidth: String,
  /**
   * 列是否固定在左侧或者右侧，可取值：
   * true/'left'  - 固定左侧
   * 'right'      - 固定右侧
   */
  fixed: [String, Boolean],
  // 当内容过长被隐藏时显示 tooltip
  showOverflowTooltip: {
    type: Boolean,
    default: false
  },
  // 是否可选
  selectable: {
    type: Function
  },

})
</script>

<style scoped lang="scss">

</style>